<template>
	<view :style="[AppSkinVar]">
		<view class="account bg-white e-m-b-20 ">
			<view class="e-flex">
				<view class="account-label e-rela c-c7">
					{{$t('user.从')}}
				</view>
				<text>{{account ? account.name :''}}</text>
			</view>
			<view class="e-flex">
				<view class="account-label e-rela c-c7">
					{{$t('user.到')}}
				</view>
				<view class="e-flex-1 e-flex e-flex-between e-m-b-10" @tap="pickerShow = true">
					<text :class="{ 'c-c7': !selectAccount||!selectAccount.name }">{{ !selectAccount || !selectAccount.name ? $t('user.请选择到账账户') : selectAccount.name }}</text>
					<image class="img-36" :src="$staticPath('classify/arrow-right.png')"></image>
				</view>
			</view>
			<view class="p-l-98">
				<text class="c-c7">{{ $t('user.转账服务费') }} {{ scale }}{{scaleType === 1 ? '%' : '' }}</text>
			</view>
		</view>
		<e-picker :cancelText="$t('common.取消')" :confirmText="$t('common.确认')" :show="pickerShow"
			:columns="[convertAccountList]" keyName="name" @cancel="pickerShow = false" @confirm="select"></e-picker>
		<transfer-card :scale="scale" :account="selectAccount" :max="max" :scaleType="scaleType" :amortizedRule="amortizedRule" :operationa="operationa" type="转换" :ttype="2" @transfer="transfer"></transfer-card>
		<password-popup ref="passwordRef" :show="passwordShow" @confirm="confirm"
			@close="passwordShow = false"></password-popup>
	</view>
</template>

<script setup lang="ts">
	import {
		ref,
		computed
	} from 'vue'
	import transferCard from './child/transfer-card.vue'
	import {
		getConvertExtractRule,
		postConvert
	} from '@/common/request/api'
	import type {
		ConvertExtractRuleItem
	} from '@/common/request/api'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import { storeToRefs } from 'pinia'
	import { useUser } from '@/common/stores';
	const props = defineProps({
		id: String
	})
	const ctx = useCurrentInstance()

	const userStores = useUser()
	const {
		accountList
	} = storeToRefs(userStores)

	const scale = ref(0)
	const operationa = ref(1)
	const scaleType = ref(1)
	const money = ref(0)
	const pickerShow = ref(false)
	const convertAccountList = ref < ConvertExtractRuleItem[] > ([])
	const selectAccount = ref < ConvertExtractRuleItem | undefined > (undefined)

	const passwordShow = ref(false)
	const passwordRef = ref()


	const transfer = (_money: number) => {
		if (!selectAccount.value) {
			ctx.$toastApp(ctx.$t('user.请选择到账账户'))
			return
		}
		if (!_money) {
			ctx.$toastApp(ctx.$t('user.请输入转换额度'))
			return
		}
		money.value = _money
		passwordShow.value = true
	}
	const select = (e: {
		value: ConvertExtractRuleItem[]
	}) => {
		let account = e.value[0]
		operationa.value = account.operationa
		scale.value = account.scale
		scaleType.value = account.scaleType
		selectAccount.value = account
		pickerShow.value = false
	}
	const confirm = (payword: string) => {
		passwordRef.value?.reset?.()
		passwordShow.value = false
		postConvert({
			payword,
			strategy: props.id,
			money: money.value,
			target: selectAccount.value!.targetStrategy
		}).then(res => {
			userStores.getAccountList()
			ctx.$goRedirectTo('/pages/user/wallet/currencyStatus', {
				type: 1,
				account: res.arrivalStrategy,
				money: res.arrivalMoney,
				time: res.arrivalTime
			})

		}).catch(res => {
			ctx.$goTo('/pages/user/wallet/currencyStatus', {
				type: 3,
				msg: res.msg
			})
		})
	}



	const account = computed(() => accountList.value.find(item => item.strategy === props.id))
	const max = computed(() => account.value?.money || 0)

	onLoad(() => {
		getConvertExtractRule(props.id).then(res => {
			convertAccountList.value = res.rule
		})
		userStores.getAccountList()
	})
</script>
<style>
	page {
		background-color: #f7f7f7;
		padding: 30rpx;
	}
</style>
<style lang="scss" scoped>
	.c-c7 {
		color: #c7c7c7;
	}

	.p-l-98 {
		padding-left: 98rpx !important;
	}

	.account {
		box-shadow: 0 4px 20 0 #f3f3f3;
		border-radius: 10rpx;
		padding: 0 28rpx;
		background: #feffff;

		>view {
			padding: 40rpx 0;
			box-shadow: 0 -1rpx 0 0 #EDEDED;
		}

		.account-label {
			width: 98rpx;
			padding-left: 28rpx;

			&::after {
				content: '';
				position: absolute;
				top: calc(50% - 4rpx);
				left: 0;
				width: 8rpx;
				height: 8rpx;
				border-radius: 50%;
				background: var(--color-primary);

			}
		}
	}
</style>